<template>
	<view>
		<scroll-view scroll-y="true" class="music-list">
			<!-- 歌曲 -->
			<view class="item" v-for="(item,index) in musicList" :key="index">
				<view class="index">{{index+1}}</view>
				<view class="musicInfo">
					<view class="name">{{item.name}}</view>
					<view class="author"> {{item.author?item.author:'未知歌手'}}</view>
				</view>
				<text class="iconfont more">&#xe700;</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "list-music",
		data() {
			return {};
		},
		props: ['musicList'],
		created() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.music-list {
		height: 100%;
		width: 100%;

		// 歌曲列表
		.item {
			display: flex;
			margin: 10rpx 10rpx 20rpx 20rpx;
			align-items: center;
			color: #959595;

			.index {
				display: flex;
				justify-content: center;
				width: 58rpx;
				font-size: $font-size-l-m;
				line-height: 30rpx;
			}

			.musicInfo {
				margin-left: 10rpx;
				flex: 1;

				.name {
					font-size: 28rpx;
					color: black;
					width: 70vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.author {
					font-size: 20rpx;
					align-items: center;
					width: 70vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.author image {
					width: 32rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

			}

			.iconfont.more {
				font-size: $icon-size-s-m;
				color: #c7c7c7;
				margin-right: 10rpx;
			}
		}
	}
</style>